<template>
  <div class="join-members  bg-fog-13">
    <div class="join-item py-24px">
      <p class="text-text-3 text-18px text-center m-0 mb-16px">
        Accepted Networks
      </p>
      <div class="flex justify-center flex-wrap gap-6px px-10px ">
        <div class=" item-icon"></div>
        <div class=" item-icon"></div>
        <div class="item-icon"></div>
        <div class=" item-icon"></div>
        <div class=" item-icon"></div>
        <div class=" item-icon"></div>
        <div class=" item-icon"></div>
        <div class=" item-icon"></div>
        <div class=" item-icon"></div>
        <div class=" item-icon"></div>
        <div class=" item-icon"></div>
        <div class=" item-icon"></div>
        <div class=" item-icon"></div>
        <div class=" item-icon"></div>
        <div class=" item-icon"></div>
        <div class=" item-icon"></div>
        <div class=" item-icon"></div>
        <div class=" item-icon"></div>
      </div>
    </div>
    <div class="join-item px-12px py-24px">
      <p class="text-center m-0 text-text-3 leading-24 text-18px mb-12px">
        Sponsorship and Gaming <br />
        Responsibilities
      </p>
      <div class="item-wrap text-center">
        <div class="h-54px flex justify-between mb-12px">
          <img src="https://bc.game/assets/sigma.1d4c21cd.png" alt="" />
          <img src="https://bc.game/assets/cloudnine.22d04592.png" alt="" />
          <img src="https://bc.game/assets/afa.4900db57.png" alt="" />
        </div>
        <div class="h-46px flex justify-between mb-12px">
          <img src="https://bc.game/assets/verify.f2a422bd.png" alt="" />
          <img src="https://bc.game/assets/itech.3eab3608.png" alt="" />
          <img src="https://bc.game/assets/respon.3cbc9f21.png" alt="" />
        </div>

        <img
          class="h-46px mx-auto"
          src="https://bc.game/assets/eighteen.1ff0e7bf.png"
          alt=""
        />
      </div>
    </div>
    <div class="join-item px-18px py-24px text-10px text-center">
      <p>
        <img
          class="h-34px"
          src="https://bc.game/assets/logo_pure.5df3a0c2.png"
          alt=""
        />
      </p>
      <span>
        A multi-award winning crypto casino. With a player-centric approach,
      </span>
      <span>BC.GAME </span>
      <span> is able to satisfy millions of gamblers across the globe. </span>
      <span>BC.GAME</span>
      <span>
        has its priority set on its community, ensuring an everlasting and
        endlessly entertaining gambling experience.</span
      >
      <p class="text-center mt-28px">
        <img
          class="h-34px"
          src="https://bc.game/assets/license.d1460593.png"
          alt=""
        />
      </p>

      <span>BC.GAME</span>
      <span>
        is operated by BlockDance B.V. (Commercial register of Curaçao
        no.158182, Emancipatie Boulevard Dominico F. "Don" Martina 31, Curaçao)
        under a sublicense CIL pursuant to Master gaming License #5536/JAZ.
      </span>
      <p class="mt-24px m-0">©2023 BC.GAME ALL RIGHTS RESERVED</p>
      <p class="m-2px">1BTC=¥6,205,672</p>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="less" scoped>
// .loop(@index) when (@index > 0) {
//   // 生成带有不同背景颜色的样式规则
//   .item-icon {
//     background-image: url("https://bc.game/assets/hover.aedd2fb3.png");
//   }
//   // 递归调用循环，减少索引
//   .loop(@index - 1);
// }
.join-members {
  .join-item {
    border-bottom: 1px solid var(--border-4);
  }
  .item-icon {
    background-image: url("https://bc.game/assets/hover.aedd2fb3.png");
    background-size: 205px 164px;
    background-repeat: no-repeat;
    transform: scale(0.85);
    background-origin: left top;
    height: 40px;
    width: 40px;
    &:nth-child(1) {
      background-position-x: 0;
      background-position-y: -41px;
    }
    &:nth-child(2) {
      background-position: -82px -82px;
    }
    &:nth-child(3) {
      background-position: -41px -82px;
    }
    &:nth-child(4) {
      background-position: -164px -82px;
    }
    &:nth-child(5) {
      background-position: -82px 0;
    }
    &:nth-child(6) {
      background-position: -41px -123px;
    }
    &:nth-child(7) {
      background-position: -164px -41px;
    }
    &:nth-child(8) {
      background-position: -41px -41px;
    }
    &:nth-child(9) {
      background-position: -41px 0;
    }
    &:nth-child(10) {
      background-position: -123px -123px;
    }
    &:nth-child(11) {
      background-position: -82px -123px;
    }
    &:nth-child(12) {
      background-position: 0 0;
    }
    &:nth-child(13) {
      background-position: 0 -123px;
    }
    &:nth-child(14) {
      background-position: 0 -82px;
    }
    &:nth-child(15) {
      background-position: -123px 0;
    }
    &:nth-child(16) {
      background-position: -164px 0;
    }
    &:nth-child(17) {
      background-position: -82px -41px;
    }
    &:nth-child(18) {
      background-position: -123px -82px;
    }
  }
}
</style>
